const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: '/src/index.js',
    output: {
        filename: "index.js",//自定义打包后的文件名称
        path: path.resolve(__dirname, 'dist')//自定义名称dist
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader'
            ]
        },]
    },
    plugins: [
        new HtmlWebpackPlugin(//会自动生成html且默认引入对应的js /css
            {
                template: "./src/index.html"//复制当前文件与生成的文件合并
            }
        )
    ],
    mode: 'development',
    //开发服务器 用来自动化（自动编译，自动化打开浏览器，自动刷新浏览器）
    // 下载 npm install webpack-dev-server -D
    devServer: {
        static: path.resolve(__dirname, 'dist'),
        compress: true,
        port: 9000,
        open: true,
        hot: true//开启HMR功能 webpack4
    },
    target: process.env.NODE_ENV === "development" ? "web" : "browserslist",//webpack5 代替hot方法
    devtool: 'source-map'//使用source-map
}